<template>
  <div class="page complete">
    <custom title="订单确认" is-back />
    <div class="address" @click="addressShow=true">
      <div class="flex justify-sb align-center addressBox">
        <!-- <div class="flex">
          <img src="@/assets/integralOrderComplete/address.png" alt="" class="addressImg" />
          <div>收货地址：立即选择</div>
        </div> -->
        <div>
          <div class="flex">
            <div class="addressTag">默认</div>
            <div class="addressTagTit">广西壮族自治区  柳州市 城中区 </div>
          </div>
          <div class="addressTit">西一巷66号606室</div>
          <div class="addressIphone">余少先生  188****9831</div>
        </div>
        <div class="addressIcon"><van-icon name="arrow" /></div>
      </div>
    </div>
    <div class="shop">
      <div class="flex align-center shopTop">
        <img src="@/assets/integralOrderComplete/shop.png" alt="" class="shopTopImg" />
        <div>王善无</div>
      </div>
      <div class="shopCont">
        <div class="flex shopBox" style="margin:0;">
          <img src="https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/166711/5/20789/102338/6084c98aEd1fd5116/0ce2ba968d83589e.jpg!q80.dpg" alt="" class="shopImg" />
          <div class="shopDetail">
            <div class="flex justify-sb">
              <div class="shopDetailTit">文具盒</div>
              <div class="shopDetailPrice">¥ 497.90</div>
            </div>
            <div class="shopDetailNum">数量：10个</div>
          </div>
        </div>
        <!-- <div class="flex shopBox">
          <img src="http://img-arch.pconline.com.cn/images/upload/upc/tx/photoblog/1104/11/c2/7278725_7278725_1302501879093_mthumb.jpg" alt="" class="shopImg" />
          <div class="shopDetail">
            <div class="flex justify-sb">
              <div class="shopDetailTit">文具盒</div>
              <div class="shopDetailPrice">¥ 497.90</div>
            </div>
            <div class="shopDetailNum">数量：10个</div>
          </div>
        </div> -->
      </div>
      <div class="shopHJ">总计1商品 合计￥497.90</div>
    </div>
    <!-- <div class="invoice">
      <div class="flex justify-sb align-center invoiceTop">
        <div class="invoiceTopTit">发票</div>
        <div class="invoiceTopIcon"><van-icon name="arrow" /></div>
      </div>
      <div>
        <div class="flex justify-sb align-center invoiceWarn">
          <div class="flex align-center">
            <img src="@/assets/integralOrderComplete/warn.png" alt="" class="invoiceWarnImg" />
            <div class="invoiceWarnTit">本公司依法开具发票，请仔细核对发票各项信息，</div>
          </div>
          <div class="invoiceWarnIcon"><van-icon name="cross" /></div>
        </div>
        <div class="flex align-center invoiceRemarksBox">
          <div class="invoiceRemarks">备注</div>
          <input id="" class="invoiceRemarksInput" type="text" name="" placeholder="给商家留言" />
        </div>
      </div>
    </div> -->
    <div class="flex justify-sb align-center coupon" @click="couponShow=true">
      <div class="couponTit">优惠券</div>
      <div class="flex">
        <div class="couponVal">无</div>
        <div class="couponIcon"><van-icon name="arrow" /></div>
      </div>
    </div>
    <div class="detailed">
      <div class="flex justify-sb align-center detailedTop">
        <div class="detailedTopL">商品金额</div>
        <div class="detailedTopR">¥497.90</div>
      </div>
      <div class="detailedCon">
        <div class="flex justify-sb detailedConBox" style="margin:0;">
          <div class="detailedConBoxL">优惠券</div>
          <div class="detailedConBoxR">-¥0</div>
        </div>
        <div class="flex justify-sb detailedConBox">
          <div class="detailedConBoxL">促销优惠</div>
          <div class="detailedConBoxR">-¥0</div>
        </div>
        <div class="flex justify-sb detailedConBox">
          <div class="detailedConBoxL">运费</div>
          <div class="detailedConBoxR">-¥0</div>
        </div>
      </div>
    </div>
    <div class="emtry"></div>
    <div class="flex align-center but">
      <div class="butCont">
        <div class="flex butContT">
          <div class="butContTTit">订单总价: </div>
          <div class="butContTPrice"><span class="butContTPriceIcon"> ¥</span>497.90</div>
        </div>
        <div class="butContF">为您节省¥0</div>
      </div>
      <div class="butBox" @click="onSend()">提交订单</div>
    </div>
    <!-- 优惠券弹窗 -->
    <van-popup
      v-model:show="couponShow"
      round
      position="bottom"
      safe-area-inset-bottom
    >
      <div class="pop">
        <div class="flex justify-sb align-center popTop">
          <div></div>
          <div class="popTopTit">选择优惠券</div>
          <div class="popTopClose" @click="couponShow=false">取消</div>
        </div>
        <div class="flex align-center popBox" style="margin-top:0;">
          <div class="popBoxTit">满100减20</div>
          <div class="popBoxTag">推荐</div>
        </div>
        <div class="flex align-center popBox">
          <div class="popBoxTit">满100减20</div>
        </div>
      </div>
    </van-popup>
    <!-- 地址弹窗 -->
    <van-popup
      v-model:show="addressShow"
      round
      position="bottom"
      safe-area-inset-bottom
    >
      <div class="pop">
        <div class="flex justify-sb align-center popTop">
          <div></div>
          <div class="popTopTit">选择收货地址</div>
          <div class="popTopClose" @click="addressShow=false">取消</div>
        </div>
        <div class="popAddress">
          <div class="flex justify-sb align-center addressBox">
            <div>
              <div class="flex">
                <div class="addressTag">默认</div>
                <div class="addressTagTit">广西壮族自治区  柳州市 城中区 </div>
              </div>
              <div class="addressTit">西一巷66号606室</div>
              <div class="addressIphone">余少先生  188****9831</div>
            </div>
            <div class="addressIcon"><van-icon name="arrow" /></div>
          </div>
          <div class="flex justify-sb align-center addressBox">
            <div>
              <div class="flex">
                <div class="addressTag">默认</div>
                <div class="addressTagTit">广西壮族自治区  柳州市 城中区 </div>
              </div>
              <div class="addressTit">西一巷66号606室</div>
              <div class="addressIphone">余少先生  188****9831</div>
            </div>
            <div class="addressIcon"><van-icon name="arrow" /></div>
          </div>
          <div class="flex justify-sb align-center addressBox">
            <div>
              <div class="flex">
                <div class="addressTag">默认</div>
                <div class="addressTagTit">广西壮族自治区  柳州市 城中区 </div>
              </div>
              <div class="addressTit">西一巷66号606室</div>
              <div class="addressIphone">余少先生  188****9831</div>
            </div>
            <div class="addressIcon"><van-icon name="arrow" /></div>
          </div>
          <div class="flex justify-sb align-center addressBox">
            <div>
              <div class="flex">
                <div class="addressTag">默认</div>
                <div class="addressTagTit">广西壮族自治区  柳州市 城中区 </div>
              </div>
              <div class="addressTit">西一巷66号606室</div>
              <div class="addressIphone">余少先生  188****9831</div>
            </div>
            <div class="addressIcon"><van-icon name="arrow" /></div>
          </div>
          <div class="flex justify-sb align-center addressBox">
            <div>
              <div class="flex">
                <div class="addressTag">默认</div>
                <div class="addressTagTit">广西壮族自治区  柳州市 城中区 </div>
              </div>
              <div class="addressTit">西一巷66号606室</div>
              <div class="addressIphone">余少先生  188****9831</div>
            </div>
            <div class="addressIcon"><van-icon name="arrow" /></div>
          </div>
          <div class="flex justify-sb align-center addressBox">
            <div>
              <div class="flex">
                <div class="addressTag">默认</div>
                <div class="addressTagTit">广西壮族自治区  柳州市 城中区 </div>
              </div>
              <div class="addressTit">西一巷66号606室</div>
              <div class="addressIphone">余少先生  188****9831</div>
            </div>
            <div class="addressIcon"><van-icon name="arrow" /></div>
          </div>
        </div>
        <div class="popAddressBut" @click="onGoAddress">新增收货地址</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import custom from '@/components/custom.vue'
export default {
  name: 'Coupon',
  components: { custom },
  data() {
    return {
      couponShow: false,
      addressShow: false
    }
  },
  created() {
  },
  methods: {
    // 选择地址
    onGoAddress() {
      this.$jump('/addNewAddress')
    },
    // 提交订单
    onSend() {
      this.$jump('/integralConfirmOrder')
    }
  }
}
</script>

<style scoped>
.page{
  background: #F2F2F2;
}
.address{
  height: 174px;
  padding: 20px;
  background: #FFFFFF;
}
.addressBox{
  min-height: 100px;
  background: #F2F2F2;
  border-radius: 6px;
  padding: 16px;
  font-size: 26px;
  color: #000000;
  line-height: 1rem;
  margin-bottom: 20px;
}
.addressImg{
  width: 32px;
  height: 32px;
  display: block;
  margin-right: 18px;
}
.addressIcon{
  font-size: 40px;
  color: #bbb;
}
.addressTag{
  width: 64px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  background: #F35517;
  border-radius: 4px;
  margin-right: 10px;
}
.addressTagTit{
  font-size: 24px;
  color: #676767;
}
.addressTit{
  font-size: 26px;
  color: #000000;
  padding: 12px 0;
}
.addressIphone{
  font-size: 24px;
  color: #676767;
}
.shop{
  margin-top: 20px;
}
.shopTop{
  width: 750px;
  height: 80px;
  background: #FFFFFF;
  font-size: 28px;
  color: #000000;
}
.shopTopImg{
  width: 36px;
  height: 36px;
  display: block;
  margin-left: 18px;
  margin-right: 16px;
}
.shopCont{
  background: #F8F8F8;
  padding: 20px 40px;
}
.shopBox{
  margin-top: 20px;
}
.shopImg{
  width: 110px;
  height: 110px;
  display: block;
  border-radius: 8px;
}
.shopDetail{
  margin-left: 20px;
  flex: 1;
}
.shopDetailTit{
  font-size: 26px;
  color: #000000;
}
.shopDetailPrice{
  font-size: 28px;
  color: #000000;
}
.shopDetailNum{
  font-size: 26px;
  color: #A7A7A7;
  margin-top: 18px;
}
.shopHJ{
  padding: 0 40px;
  height: 80px;
  line-height: 80px;
  background: #FFFFFF;
  font-size: 26px;
  text-align: right;
}
.invoice{
  margin-top: 20px;
  background: #FFFFFF;
}
.invoiceTop{
  height: 92px;
  border-bottom: 1px solid #E8E8E8;
}
.invoiceTopTit{
  font-size: 26px;
  margin-left: 20px;
}
.invoiceTopIcon{
  font-size: 34px;
  color: #bbb;
  margin-right: 20px;
}
.invoiceWarn{
  margin: 10px auto;
  width: 710px;
  height: 60px;
  background: #FFF1D8;
  border: 1px solid #FFE3B2;
  border-radius: 4px;
}
.invoiceWarnImg{
  width: 34px;
  height: 34px;
  display: block;
}
.invoiceWarnTit{
  color: #404040;
  font-size: 24px;
  margin-left: 10px;
}
.invoiceWarnIcon{
  font-size: 34px;
  width: 40px;
  height: 40px;
  color: #bbb;
  margin-right: 10px;
}
.invoiceRemarksBox{
  margin-top: 20px;
  padding: 0 20px 36px;
  height: 40px;
}
.invoiceRemarks{
  font-size: 26px;
  color: #000000;
  line-height: 1rem;
}
.invoiceRemarksInput{
  border:0px;
  display: block;
  margin-left: 30px;
}
.coupon{
  height: 94px;
  background: #fff;
  margin-top: 20px;
}
.couponTit{
  font-size: 26px;
  margin-left: 20px;
}
.couponIcon{
  font-size: 34px;
  color: #bbb;
  margin-right: 20px;
}
.couponVal{
  font-size: 26px;
  color: #F35517;
}
.detailed{
  margin-top: 20px;
  background: #fff;
}
.detailedTop{
  height: 89px;
  border-bottom: 1px solid #E8E8E8;
}
.detailedTopL{
  margin-left: 20px;
  font-size: 26px;
  color: #000000;
}
.detailedTopR{
  font-size: 28px;
  color: #F35517;
  margin-right: 20px;
}
.detailedCon{
  padding: 32px 28px;
}
.detailedConBox{
  margin-top: 38px;
}
.detailedConBoxL{
  font-size: 26px;
  color: #000000;
}
.detailedConBoxR{
  font-size: 22px;
  color: #000000;
}
.emtry{
  width: 100%;
  height: 140px;
  background: #F2F2F2;
}
.but{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  justify-content: flex-end;
  background: #FFF;
}
.butContT{

}
.butContTTit{
  font-size: 26px;
}
.butContTPrice{
  font-size: 32px;
  color: #F35517;
  margin-left: 10px;
}
.butContTPriceIcon{
  font-size: 26px;
}
.butContF{
  font-size: 24px;
  text-align: right;
  color: #F35517;
}
.butBox{
  width: 224px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background: linear-gradient(270deg, #EF3814 0%, #FF8D13 100%);
  box-shadow: 0px 5px 11px 1px #F3E8E9;
  border-radius: 40px;
  font-weight: 500;
  color: #FFFFFF;
  margin: 0 20px 0 30px;
}
.pop{
  background:#fff;
  min-height: 500px;
}
.popTop{
  height: 80px;
}
.popTopTit{
  font-size: 28px;
  color: #2B2B2B;
}
.popTopClose{
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin-right: 20px;
  font-size: 26px;
  color: #bbb;
}
.popBox{
  width: 710px;
  height: 92px;
  background: #F8F8F8;
  border-radius: 6px;
  margin: 0 auto;
  margin-top: 20px;
}
.popBoxTit{
  margin-left: 18px;
  margin-right: 30px;
  font-size: 28px;
}
.popBoxTag{
  padding: 0 8px;
  background: #FD8013;
  border-radius: 6px;
  line-height: 32px;
  text-align: center;
  font-size: 22px;
  color: #FFFFFF;
}
.popAddress{
  padding: 20px;
  overflow-y: auto;
  max-height: 500px;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.popAddress::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.popAddressBut{
  width: 710px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #F35517;
  border-radius: 6px;
  font-size: 28px;
  color: #F35517;
  margin: 20px;
}
</style>
